<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计算属性复杂操作</title>
</head>

<body>
  <div id="root">
      <h2>总价格:{{books[0].price+books[1].price+books[2].price+books[3].price}}</h2>
      <h2>总价格:{{totalPrice}}</h2>
  </div>
  <script src="../practice_project/js/vue.js"></script>
  <script>
      const obj = {
          books: [
              {id: 001,name: 'Unix编程艺术',price: 117},
              {id: 002,name: '代码大全',price: 99},
              {id: 003,name: '深入理解计算机原理',price: 125},
              {id: 004,name: '现代操作系统',price: 88} 
          ]
      }
      const vm = new Vue({
          el: '#root',
          data: obj,
          // 计算属性在多次调用的时候只会调用一次
          computed: {
              totalPrice: function () {
                  // return this.books.reduce()
                  let result = 0;
                  // let是有块级作用域的
                  for (let i = 0; i < this.books.length; i++) {
                      result += this.books[i].price;
                  }
                  return result;

                  // ES6的for循环
                  //  for(let i in this.books){this.books[i]}
                  //  for(let book of this.books){}
              }
          },
          // 调用几次，就会在这里执行几次。没有缓存，性能更低。
          methods: {
            // gettotalPrice
          }
      })
  </script>
</body>

</html>